<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-21 21:07:35
-->
<template>
 <div ref="bottom3_container" style="height: 95%"></div>
</template>
<script>
import { Line } from "@antv/g2plot";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      plot: null,
      data: [],
    };
  },
  async mounted() {
    await this.loadOrderStatus();
    this.initChart();
  },
  beforeDestroy() {
    if (this.plot) {
      this.plot.destroy();
    }
  },
  methods: {
    async loadOrderStatus() {
      let url = "/dashboard/queryMouthData";
      let resp = await get(url);
      this.data = resp.data;
      this.data = this.data.filter((item) => {  
        //获取所需数据
        return (
          item.type.includes("pm25") || item.type.includes("pm10") || item.type.includes("tsp")
        );
      });
    },
    initChart() {
      const data = this.data;
      let container = this.$refs.bottom3_container;
      container.style.height = "180px";
      this.plot = new Line(this.$refs.bottom3_container, {
        data,
        xField: "date",
        yField: "value",
        seriesField: "type",
        xAxis: {},
        yAxis: {
          
        },
        
         color: [
          "l(90) 0:#fffd9d 1:#e9b30c",
          "l(90) 0:#c1f6f9 1:#418eff",
          "l(90) 0:#cfcefe 1:#9c4ed5",
        ],
        smooth: true,
        // 配置折线趋势填充
        
        area: {
          style: {
            fillOpacity: 0.15,
          },
        },
        animation: {
          appear: {
            animation: "wave-in",
            duration: 3000,
          },
        },
      });

      this.plot.render();
    },
  },
};
</script>